<template>
  <view>
		<view class="content" v-if="info">
			<image class="logo" :src="resImg(info)"></image>
			<view class="text-area">
				<text class="title">{{info.content}}</text>
			</view>
		</view>
		<uni-section class="mb-10" title="资源信息" type="line"> </uni-section>
		<uni-list>
			<uni-list-item title="资源名称" :rightText="info.name"></uni-list-item>
			<uni-list-item title="资源类型" :rightText="info.typeName"></uni-list-item>
			<uni-list-item title="作者" :rightText="info.userName"></uni-list-item>
			<uni-list-item title="上传时间" :rightText="info.uploadTime"></uni-list-item>
			<uni-list-item title="资源大小" :rightText="info.sizeStr"></uni-list-item>
			<uni-list-item title="格式" :rightText="info.ext"></uni-list-item>
		</uni-list>
  </view>
</template>

<script setup>
  import config from '@/config'
  import { ref } from "vue";
  import { getResource } from "@/api/resource.js"
  
  	const info=ref(null);
	const props = defineProps({
		id: String,
	});
  	  	
  	function resImg(res){
  		if(res.thumb){
  			return config.baseUrl+'/profile/'+res.thumb;
  		}else{
  			return config.baseUrl+'/statics/images/none.jpg';
  		}
  	}
  	getResource(props.id).then(res=>{
  		info.value = res.data;
  	})
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
